<template>
  <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }"
   class="myform" @submit="handleSubmit">
      <a-row type="flex" justify="space-between">
        <a-col :span="5">{{ title == 'add'?'添加账户':(title == 'Edit'? '编辑账户':title) }}<h1></h1></a-col>
        <a-col :span="1" class="close" @click="$emit('hide')">X</a-col>
      </a-row>
    <slot></slot>

    <a-form-item>
        <a-space><a-button @click="$emit('hide')">取消</a-button><a-button htmlType="submit">确定</a-button></a-space>
    </a-form-item>

  </a-form>
</template>

<script>
export default {
    data() {
        return {
            form: this.$form.createForm(this, { name: 'coordinated' }),
        }
    },
    methods:{
        handleSubmit(e) {
            e.preventDefault();
            this.form.validateFields((err, values) => {
                if (!err) {
                    console.log('Received values of form: ', values);
                    this.$emit('update', values);
                }
            });
        },
    },
    props:[
        'title',
    ],
}
</script>

<style>
    .myform{
        width: 400px;
        position: absolute;
        background: white;
        box-shadow: 2px 2px 10px rgb(190, 190, 190);
        border-radius: 5px;
        padding: 20px !important;
        left: 600px;
        top: 100px;
    }
    .close{
        cursor: pointer;
    }
</style>